Skip to main content

Hooks

useButtonFeedback Hook

The useButtonFeedback hook is designed to provide feedback for button interactions in the form of sounds and text-to-speech. It supports custom MP3 sounds for various button actions and provides functionality for speaking text when a button is clicked.

Usage

This hook is ideal for improving accessibility and user interaction by adding auditory feedback to button presses and reading out text passed to the function.

Example Usage

import React from 'react';
import useButtonFeedback from './useButtonFeedback';

const MyComponent: React.FC = () => {
const { buttonHandler, isSpeaking } = useButtonFeedback();

const handleClick = () => {
buttonHandler(
'select',
'You have selected this option.',
(text) => console.log(text) // Example speech function (you would replace this with actual text-to-speech logic)
);
};

return (
<button onClick={handleClick} disabled={isSpeaking}>
Click Me
</button>
);
};

useAACSounds Hook

The useAACSounds hook is designed to manage and play AAC keyboard button sounds for various words. It uses the use-sound library to play MP3 files for each corresponding word, with customizable volume control.

Usage

This hook provides a function to play sounds associated with predefined words (e.g., "apples", "airplane", "alien"). Each word has an associated MP3 file, and the hook makes it easy to trigger the sound when a specific word is selected.

Example Usage

import React from 'react';
import useAACSounds from './useAACSounds';

const AACKeyboard: React.FC = () => {
const { playSound } = useAACSounds();

const handleButtonClick = (word: string) => {
playSound(word);
};

return (
<div>
<button onClick={() => handleButtonClick('apples')}>Apples</button>
<button onClick={() => handleButtonClick('airplane')}>Airplane</button>
<button onClick={() => handleButtonClick('alien')}>Alien</button>
{/* Add more buttons for other words */}
</div>
);
};

useQuickTextToSpeech Hook

The useQuickTextToSpeech hook provides functionality for text-to-speech (TTS), allowing you to speak text aloud with configurable voices and platform-specific settings. It also supports stopping ongoing speech and selecting voices based on priority for various platforms.

Usage

This hook is ideal for adding voice feedback in web applications, ensuring accessibility and improving user experience with dynamic, platform-specific TTS features.

Example Usage

import React, { useEffect } from 'react';
import useQuickTextToSpeech from './useQuickTextToSpeech';

const MyComponent: React.FC = () => {
const { speak, stop, isReady } = useQuickTextToSpeech();

useEffect(() => {
if (isReady) {
speak('Hello, welcome to the site!');
}
}, [isReady, speak]);

const handleStop = () => {
stop();
};

return (
<div>
<button onClick={handleStop}>Stop Speech</button>
</div>
);
};

useTextToSpeech Hook

The useTextToSpeech hook provides advanced functionality for text-to-speech (TTS) synthesis in React applications. It includes features such as selecting an optimal voice for the platform, retry mechanisms for mobile browsers, and the ability to speak and stop speech dynamically.

Usage

This hook is ideal for adding TTS features with voice selection and retry mechanisms for mobile compatibility. It can be used to provide dynamic, voice-based feedback in web applications.

Example Usage

import React, { useEffect } from 'react';
import useTextToSpeech from './useTextToSpeech';

const MyComponent: React.FC = () => {
const { speak, stop, isReady } = useTextToSpeech();

useEffect(() => {
if (isReady) {
speak('Welcome to the site!');
}
}, [isReady, speak]);

const handleStop = () => {
stop();
};

return (
<div>
<button onClick={handleStop}>Stop Speech</button>
</div>
);
};